<template>
	<view class="column hidden plr30 hb">
		<view class="amount mt22">
			<view class="amount_item">
				<view class="value">
					<u-count-to :startVal="0" :endVal="getUserInfo('amount')" :decimals="2" color="#000" fontSize="40rpx" bold
						:duration="500" />
				</view>
				<view class="desc">可用余额(元)</view>
				<view class="but but-primary active_bg1" @click="navTo('pages/user/surplus/recharge')">充值</view>
			</view>
			<view class="amount_item">
				<view class="value">
					<u-count-to :startVal="0" :endVal="getUserInfo('reward_amount')" :decimals="2" color="#000" fontSize="40rpx"
						bold :duration="500" />
				</view>
				<view class="desc">奖励余额(元)</view>
				<view class="but but-primary active_bg1" @click="navTo('pages/user/withdrawal/index',{type:2})">提现</view>
			</view>
			<view class="amount_item">
				<view class="value">
					<u-count-to :startVal="0" :endVal="getUserInfo('freeze_amount')" :decimals="2" color="#000" fontSize="40rpx"
						bold :duration="500" />
				</view>
				<view class="desc">冻结余额(元)</view>
				<view class="but but-warning active_bg1">余额退款</view>
			</view>
		</view>

		<view class="mb30">
			<u-tabs :list="tabList" lineColor="#0759BB" lineWidth="40rpx" :scrollable="false" v-model:current="current"
				keyName="label" lineHeight="3rpx" :activeStyle="{
					color: '#0759BB',
					fontSize: '30rpx',
					fontWeight: '600'
				}" :inactiveStyle="{
					color: '#000',
					fontSize: '28rpx',
					fontWeight: '600'
				}" :itemStyle="{
					padding: '0',
					height: '60rpx'
				}" @change="onTabChange" />
		</view>

		<view class="flex-1 hb hidden">
			<swiper class="flex-1 hidden hb" :indicator-dots="false" :autoplay="false"
				@transition="scrollViewTool.isEnabled = false" @animationfinish="scrollViewTool.isEnabled = true"
				:current="current" @change="onSwiperChange">
				<swiper-item v-for="item in tabList" :key="item.label">
					<scroll-view scroll-y class="h100" :refresher-enabled="scrollViewTool.isEnabled"
						refresher-background="rgba(0,0,0,0)" :refresher-triggered="scrollViewTool.triggered"
						@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false"
						@refresherabort="triggered = false" @scrolltolower="reachBottom">
						<view class="column" v-if="listData.length>0">
							<view class="detail-item esay-out1" v-for="item in listData" :key="item.id">
								<view class="top">
									<text class="title">{{item.category_label}}</text>
									<text class="value value-out">{{item.amount}}元</text>
								</view>
								<view class="bottom">
									<text class="money">变动前余额:{{item.before_amount}}元</text>
									<text class="time">{{item.create_time}}</text>
								</view>
							</view>
							<u-loadmore :status="loadStatus" />
						</view>
						<view class="flex-1 hb centerV" v-else>
							<fr-empty-record />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		navTo,
		getUserInfo
	} from '@/core/app';
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList';
	import {
		getAccountRecord
	} from "@/api/user/index";
	const queryParams = ref({
		category: 10
	});
	const {
		listData,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} = useLoadPageList(getAccountRecord, queryParams.value);

	const current = ref(0);
	const tabList = ref([{
			label: '可用余额明细',
			value: 10
		},
		{
			label: '奖励余额明细',
			value: 20
		},
		{
			label: '冻结余额明细',
			value: 30
		}
	]);
	reSetList()

	function onTabChange(e) {
		current.value = e.index;
		queryParams.value.category = e.value;
	}

	function onSwiperChange(e) {
		if (e.type == 'change') {
			listData.value = []
			current.value = e.detail.current;
			queryParams.value.category = tabList.value[e.detail.current].value;
			reSetList();
		}
	}
</script>

<style scoped lang="scss">
	.amount {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 30rpx 23rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;

		.amount_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.value {
				font-weight: bold;
				font-size: 50rpx;
				color: #000;
			}

			.desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #484848;
				margin-top: 8rpx;
			}

			.but {
				width: 170rpx;
				height: 70rpx;
				border-radius: 15rpx;
				margin-top: 31rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.but-primary {
				background-color: #0759bb;
			}

			.but-warning {
				background-color: #f65812;
			}
		}
	}

	.active_bg1 {
		position: relative;

		&:active {
			background: rgba(0, 0, 0, 0.5) !important;
		}
	}

	.detail-item {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 26rpx 31rpx;
		box-sizing: border-box;
		margin-bottom: 22rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #000;
			}

			.value {
				font-weight: bold;
				font-size: 28rpx;
			}

			.value-out {
				color: #ff2121;
			}

			.value-in {
				color: #0759BB;
			}
		}

		.bottom {
			margin-top: 13rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #484848;

			.time {
				padding-bottom: 5rpx;
			}
		}
	}
</style>